<template>
    <Tooltip 
        v-if="openTooltip"
        class="overflow-text edit-table-tooptip"
        arrowPointAtCenter 
        v-model:open="overflowText"
        @openChange="openChangeHandel"
        @mouseleave="openTooltipVisible = false"
        v-bind="$attrs"
    >
        <template #title>
            <slot name="title">
                <slot></slot>
            </slot>
        </template>
        <div ref="tiptextRef" class="tip-content"><slot></slot></div>
    </Tooltip>
    <span v-else class="overflow-text edit-table-tooptip" :style="wapStyle"><slot></slot></span>
    
    <Teleport to="body" v-if="autoTooltip && openTooltipVisible">
        <div>
            <div ref="hiddenTextRef" class="edit-table-hidden-text">
                <slot name="title">
                    <slot></slot>
                </slot>
            </div>
        </div>
    </Teleport>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted, nextTick, useSlots } from "vue"
import { Tooltip } from "ant-design-vue"
import { computedOpenTooltipVisible } from "../plugins/core/util";

const props = defineProps({
    openTooltip: {
        type: Boolean,
        default: false
    },
    autoTooltip: {
        type: Boolean,
        default: true
    },
    wapStyle: {
        type: Object,
        default: undefined
    }
})

const tiptextRef = ref()
const openTooltipVisible = ref(false)
const overflowText = ref(false)
const hiddenTextRef = ref()
const openChangeHandel = (open: boolean) => {
    openTooltipVisible.value = open && props.openTooltip
    if (openTooltipVisible.value && !props.autoTooltip) {
        overflowText.value = openTooltipVisible.value
    }
}

onMounted(() => {
    if(props.openTooltip && props.autoTooltip){
        watch(openTooltipVisible, (open) => {
            if(open){
                nextTick(() => {
                    overflowText.value = openTooltipVisible.value && computedOpenTooltipVisible(hiddenTextRef.value, tiptextRef.value)
                })
            } else {
                nextTick(() => {
                    overflowText.value = false
                })
            }
        })
    }
})
</script>

<style scoped lang="less">
.tip-content{
    display: inline-block !important;
    width: 100%;
    height: 21px;
}
</style>
